<template>
    <div class="rx-pagination-popup clearfix">
        <div class="rx-frist-page fl" @click="goAssignPage('frist')" >
            <i class="iconfont icon-diyiye" :class="currentPages===1?'is-up-page':''"></i>
        </div>
        <div class="rx-up-page fl" @click="goAssignPage('up')">
            <i class="iconfont icon-shangyiye" :class="currentPages===1?'is-up-page':''"></i>
        </div>
        <div class="rx-current-page fl">
          <span>
            <div class="rx-current-pagec"></div>
            {{currentPages}}
          </span>   
        </div>
        <div class="rx-total-page fl">
           {{ '共'+ totalPages +'页'}}
        </div>
        <div class="rx-next-page fl" @click="goAssignPage('next')">
            <i class="iconfont icon-xiayiye" :class="currentPages===totalPages?'is-up-page':''"></i>
        </div>
        <div class="rx-last-page fl" @click="goAssignPage('last')">
            <i class="iconfont icon-zuihouyiye" :class="currentPages===totalPages?'is-up-page':''"></i>
        </div>
    </div>
</template>
<script>
export default {
  // currentPage 当前页
  // totalPage 总页数
  props: {
    currentPage: {
      type: Number,
      default: 1
    },
    totalPage: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      currentPages: this.currentPage,
      totalPages: this.totalPage
    };
  },
  methods: {
    goAssignPage(ev) {
      switch (ev) {
        case "frist":
          this.currentPages = 1;
          break;
        case "up":
          this.currentPages > 1
            ? (this.currentPages -= 1)
            : (this.currentPages = 1);
          break;
        case "next":
          this.currentPages < this.totalPages
            ? (this.currentPages += 1)
            : (this.currentPages = this.totalPages);
          break;
        case "last":
          this.currentPages = this.totalPages;
          break;
      }
      this.$emit("change", [this.currentPages, this.totalPages]);
    }
  }
};
</script>
<style lang="scss" scoped>
.rx-pagination-popup {
  height: 24px;
  .fl {
    float: left;
  }
  .iconfont {
    font-size: 24px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(217, 217, 217, 1);
    cursor: pointer;
  }
  .is-up-page {
    color: rgba(217, 217, 217, 1);
  }
  .rx-up-page {
    margin-right: 20px;
  }
  .rx-current-page {
    height: 36px;
    line-height: 36px;
    margin-right: 5px;
    
    span {
      display: inline-block;
      // width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      background: rgba(255, 255, 255, 1);
      border-radius: 4px;
      border: 1px solid rgba(54, 115, 255, 1);
      .rx-current-pagec{
      height: 0;
      width: 20px
    }
    }
  }
  .rx-next-page {
    margin-left: 20px;
  }
  .rx-total-page {
    height: 24px;
    line-height: 24px;
    margin-top: 6px;
  }
}
</style>
